<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例——简陋的在线播放器</title>
		<link rel="stylesheet" type="text/css" href="css/musicPlayer_css.css"/>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	</head>
	<body>
		<div id="reapp-music">
			<!--头部导航-->
			<nav id="header" class="navbar navbar-inverse">
				<div class="container-fluid">
					<!-- logo -->
					<div class="navbar-header">
						<a class="navbar-brand" href="#">Music Player</a>
					</div>
						
					<!-- 搜索框 -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<form class="navbar-form navbar-right">
							<div class="form-group">
								<input v-model="query" @keyup.enter="searchMusic(query)" type="text" class="form-control" placeholder="请输入关键字"/>
							</div>
							<input @click="searchMusic(query)" type="submit" value="搜索" class="btn btn-default" />
						</form>
					</div>
				</div>
			</nav>
			
			<!--player-->
			<audio ref='audio' :src="musicUrl" controls autoplay loop class="myaudio"></audio>
			
			<!--歌曲搜索列表-->
			<div class="panel panel-default" id="box-left">
				<div class="panel-heading">播放列表</div>
				<ul v-for="item in musicList" class="list-group">
					<li class="list-group-item">
						<span @click="playingMusic(item.id)">
							《{{item.name}}》 —— {{item.artists[0].name}} 专辑{{item.album.name}}
						</span>
						<span v-if="item.mvid!=0" @click="playingMV(item.mvid)" class="glyphicon glyphicon-expand"></span>
					</li>
				</ul>
			</div>
			
			<!--歌曲图片显示-->
			<div id="box-mid" class="col-xs-6 col-md-3">
				<a id="box-mid" href="#" class="thumbnail">
					<img :src="musicCover"/>
				</a>
			</div>
			
			<!--歌曲评论-->
			<div id="box-right" class="media">
				<li v-for="ithot in musicComment" class="list-group-item">
				<div class="media-left">
					<a href="#">
						<img class="media-object" :src="ithot.user.avatarUrl" width="64px" height="64px"/>
					</a>
				</div>
				<div class="media-body">
					<h4 class="media-heading">{{ithot.user.nickname}}</h4>
					<p>{{ithot.content}}</p>
				</div>
				</li>
			</div>
			
			<!--MV显示-->
			<!--<div v-show="isShow" id="myvideo" style="display: none;">
				<video :src="mvUrl" controls="controls" width="800" height=""></video>
				<div @click="hide" id="mask"></div>
			</div>-->
			
		</div>
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="js/musicPlayer_js.js"></script>
	</body>
</html>
